<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" href="../css/layui.css">
        <script src="../layui.js"></script>
    </head>
    <body>

        <div class="layui-card">
            <div class="layui-card-header">用户管理</div>
            <div class="layui-card-body">

                <!--表单-->
                <form class="layui-form" actions="#">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">职位名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="uname"
                                    autocomplete="off"
                                    class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button id="search" type="button" class="layui-btn layui-btn-radius
                                layui-btn-normal"><i class="layui-icon
                                    layui-icon-search"></i>搜索</button>
                        </div>
                    </div>
                </form>
                <!-- 结束表单 -->
                <!-- 数据展示 -->
                <table id="userTab" lay-filter="tab"></table>
                
            </div>

            <!--   操作按钮 -->
            <script type="text/html" id="bar_menu">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>

            <!-- 表格的数据信息 -->
            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                  <button class="layui-btn layui-btn-sm" lay-event="getCheckData">添加数据</button>
                </div>
              </script>

            <script>

               var mydata = [];
			
                layui.use(['form','table'], function(){
                    var form = layui.form
                    ,layer = layui.layer;
                    var table = layui.table;
                    var $ = layui.jquery;
                    /*
                    $.post("../RoleServlet",{"method":"findAll",pageIndex:1},function(data){
                    	mydata = data;
                    	
                    });
                    */
                    
                    $("#search").on("click",function(){
                    	table.reload('userTab', {
                    		  url: '../RoleServlet'
                    		  ,where: {
                    			  method:'findAll',
                    			  name:$("input[name=uname]").val()
                    		  } //设定异步数据接口的额外参数
                    		  //,height: 300
                    	});
                    });
                    
                    table.render({
                        elem: '#userTab'
                        ,height: 400
                        ,url:"../RoleServlet"  //数据接口
                       	, where: {
                       		method:'findAll'
                       	 }
                    	//,limits:[2,4,6,8,10]
                    	//,limit:2
                        ,page: true //开启分页
                        ,toolbar:'#toolbarDemo'
                        ,cols: [[ //表头
                        {field: 'id', title: '编号',  sort: true}
                        ,{field: 'rname', title: '角色名称' } 
                        ,{field: 'rdesc', title: '角色描述'}
                        ,{title: '操作',toolbar:'#bar_menu'}
                        ]]
                    });


                    //绑定table事件
                    table.on('tool(tab)',function(obj){
                        switch(obj.event){
                            case "edit":
                            	layer.open({
                                	id:'role_update',
                                	maxmin :true,
                                	type : 2,
                                	title : '角色修改',
                                	content :'addRole.html',
                                	area :["400px","500px"],
                                	icon:1,
                                	shade :0.3,
                                	btn:["添加","取消"],
                                	btn1:function(){
                                		window.frames[0].add();
                                		
                                		setTimeout(() => {
                                			table.reload('userTab', {
                                        		  url: '../RoleServlet'
                                        		  ,where: {
                                        			  method:'findAll',
                                        			  name:$("input[name=uname]").val()
                                        		  } //设定异步数据接口的额外参数
                                			});
                                			
										}, 1000);
                                	},
                                	btn2:function(){
                                		
                                	},
                                	success: function(layero, index){
                                	    
                                		window.frames[0].update_role(obj);
                                		
                                	}

                                });
                            
                            	
                            break;
                            case "del":
                            	layer.confirm('确定删除吗?', {icon: 3, title:'提示'}, function(index){
                            		  //do something
                            		  
                            		 $.post("../RoleServlet",{method:'del',id:obj.data.id},function(data){
                            			 if(data == "ok"){
                            				 layer.msg("删除成功!!");
                            				 table.reload('userTab', {
                                       		  url: '../RoleServlet'
                                       		  ,where: {
                                       			  method:'findAll',
                                       			  name:$("input[name=uname]").val()
                                       		  } //设定异步数据接口的额外参数
                                       		  //,height: 300
                                       	});
                            			 }else{
                            				 layer.msg("角色下面还有员工,请先删除员工!!!");
                            			 }
                            		 });
                            		  
                            		  layer.close(index);
                            		});
                            	
                            break;
                        }
                    });

                    table.on("toolbar(tab)",function(obj){
                        layer.open({
                        	id:'role_add',
                        	maxmin :true,
                        	type : 2,
                        	title : '角色添加',
                        	content :'addRole.html',
                        	area :["400px","500px"],
                        	icon:1,
                        	shade :0.3,
                        	btn:["添加","取消"],
                        	btn1:function(){
                        		window.frames[0].add();
                        	},
                        	btn2:function(){
                        		
                        	}
                        });
                    })

              
                 })
            </script>
        </body>
    </html>